<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>

<!DOCTYPE html>

<html  lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

    <style>
        .user-head-1{
            line-height: 60px;
            background: black;
        }
        #regForm,#loginForm{
            padding: 20px;
        }
        #regForm input,#loginForm input{
            width:50%;
        }
        #regForm p,#loginForm p{
            line-height:40px;
        }
        .nav-title-1 li a{
            font-size: 12px;
            color: gray;
        }
        .nav-title-1 li{
            line-height: 40px;
        }


        .ul-li-1{
            background: gray;
        }
        .ul-li-1 li{
            line-height:23px;
        }
        .ul-li-1 li a {
            font-size: 12px;
            color: white;
        }
    </style>

</head>
<body>


<c:set value="${pageContext.request.contextPath}" var="path" scope="application"/>
<c:set value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${path}/"
       var="basePath" scope="application"/>
    <!--1.登录模态框-->
    <div id="loginModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">用户登录</h4>
                </div>
                <div class="media-body">
                    <form class="form-horizontal" id="loginForm" >
                       <div class="form-group">

                           <label class="col-md-2 control-label" >用户名</label>
                           <div >
                               <input type="text"  class="col-md-5 form-control" required  name="userName" id="loginName" placeholder="请输入用户名">
                           </div>
                       </div>

                        <div class="form-group">
                            <label class="col-md-2 control-label">密码</label>
                             <div>
                                 <input type="password" class="col-md-5 form-control" required  name="userPass" id="loginPass" placeholder="请输入密码">
                             </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary  login-btn">登录</button>
                </div>
            </div>
        </div>
    </div>
    <!--2. 注册模态框-->
    <div id="regModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">用户注册</h4>
                </div>
                <div class="media-body">
                    <form class="form-horizontal text-center  " id="regForm" action="">
                        <div class="form-group">
                            <label for="addStuName" class="col-md-3">用户名:</label>
                            <div>
                                <input type="text" id="addStuName" name="userName" required="required" class="form-control col-md-7" placeholder="请输入用户名" >
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addStuPass" class="col-md-3">密码:</label>
                            <div>
                                <input type="password" id="addStuPass" name="userPass" required="required" class="form-control" placeholder="请输入密码">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="addStuPhone" class="col-md-3">手机号:</label>
                            <div>
                                <input type="text" id="addStuPhone" name="userPhone" required="required" class="form-control col-md-7" placeholder="请输入手机号" >
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="capicha" class="col-md-3">验证码:</label>
                            <div>
                                <input type="text" id="capicha" name="userCapicha" required="required" class="form-control col-md-7"  placeholder="请输入验证码">
                                <button class="btn btn-info" class="col-md-2">发送</button>
                            </div>
                        </div>


                        <div class="form-group">
                            <label for="addStuImg" class="col-md-3">头像:</label>
                            <div>
                                <input type="file" id="addStuImg" name="userImg" required="required" class="form-control">
                            </div>
                        </div>



                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary  reg-btn">注册</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid ">
        <div class="row user-head-1">

         <div class="navbar-left col-md-3 text-center">
            <c:if test="${empty sessionScope.loginUser}">
                <span  style="color: white;" class="img-circle">未登录</span>
            </c:if>
            <c:if test="${not empty sessionScope.loginUser}">
                <span style="color: white;" class="img-circle">${loginUser.userName}</span>
            </c:if>

         </div>

            <div class="col-md-6 navbar-right text-right">
                <c:if test="${empty loginUser}">
                <a href="javascript:void(0)" class="btn btn-primary" data-toggle="modal" data-target="#loginModal"><span class="glyphicon glyphicon-log-in"></span> 登录</a>
                <a href="javascript:void(0)"  class="btn btn-info  show-login-dio"><span class="glyphicon glyphicon-plus"></span> 注册</a>
                <a href="page/user/shoppingCar.html" class="btn btn-warning" target="showFrame"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
                <a href="page/user/center.html" class="btn btn-success" target="showFrame"><span class="glyphicon glyphicon-user"></span> 个人中心</a>
                <a href="page/user/main.jsp" target="showFrame" class="btn btn-danger"><span class="glyphicon glyphicon-home"></span> 返回首页</a>
                </c:if>

                <c:if test="${ not empty loginUser}">

                    <a href="page/user/shoppingCar.html" class="btn btn-warning" target="showFrame"><span class="glyphicon glyphicon-shopping-cart"></span> 购物车</a>
                    <a href="page/user/center.html" class="btn btn-success" target="showFrame"><span class="glyphicon glyphicon-user"></span> 个人中心</a>
                    <a href="page/user/main.jsp" target="showFrame" class="btn btn-danger"><span class="glyphicon glyphicon-home"></span> 返回首页</a>
                    <a href="page/user/main.jsp" target="showFrame" class="btn btn-info"><span class="glyphicon glyphicon-home"></span> 退出登录</a>
                </c:if>

            </div>
        </div>
    </div>
    <div class="container" style="margin-top: 20px">
        <div class="row" style="line-height:50px">
            <div class="col-md-2" >
                <img src="${basePath}images/logo.jpg" width="100px"  height="50px">
            </div>
            <div class="col-md-7">
                <ul class="nav nav-justified nav-title-1 secondLi">
                    <c:forEach items="${secondTypeList}" var="st">
                        <li><a href="#">${st.secondtypename}</a></li>
                    </c:forEach>
                </ul>
            </div>

            <div class="col-md-3">
                <form class="form-inline" action="">
                    <input type="text" class="form-control" placeholder="请输入关键字" style="width: 160px;">
                    <a href="page/user/list.html" target="showFrame" class="btn btn-primary">搜索</a>
                </form>
            </div>
        </div>
    </div>

    <div class="container-fluid secondType" style="display: none;position:absolute;z-index:1;width: 100%;background:white">
        <div class="row text-center">
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/1.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/2.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/3.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/4.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/5.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
            <div class="col-md-2 table-bordered">
                <img src="${basePath}images/goods/6.jpg" width="200px" style="margin-top: 20px">
                <p style="color: gray">蜗牛10plus</p>
                <p style="color: orangered">价格:1999.99元</p>
            </div>
        </div>
    </div>

    <hr>
    <div class="container">
        <div class="row" style="margin-top: 30px">
            <div class="col-md-2">
                <ul class="nav nav-stacked ul-li-1 text-center" id="firstNavId">
                    <c:forEach items="${firstTypeList}" var="ft">
                        <li><a href="#">${ft.firsttypename}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <div class="col-md-10" style="margin-left: -24px;position: relative">
                <div id="myCarousel" class=" carousel slide " >
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="${basePath}images/goods/bg1.jpg" alt="First slide">
                        </div>
                        <div class="item">
                            <img src="${basePath}images/goods/bg2.jpg" alt="Second slide">
                        </div>
                        <div class="item">
                            <img src="${basePath}images/goods/bg3.jpg" alt="Third slide">
                        </div>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="carousel-control left" href="#myCarousel" data-slide="prev" style="display:flex;align-items:center;justify-content:center;font-size:30px">&laquo;</a>
                    <a class="carousel-control right" href="#myCarousel"  data-slide="next" style="display:flex;align-items:center;justify-content:center;font-size:30px">&raquo;</a>
                </div>


                <div id="firstGoodsId" class="row table-bordered" style="display:none;position: absolute;left:25px;top:0px;background: white;z-index:1">
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>

                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                    <div class="col-md-2 text-center table-bordered">
                        <img src="${basePath}images/user/1.jpg" width="80px" style="margin-top: 10px">
                        <p style="color: gray">蜗牛10plus</p>
                        <p style="color: orangered">价格:1888.88元</p>
                    </div>
                </div>
            </div>


        </div>
        <h2>热门商品</h2>
        <div class="row text-center" style="margin-top: 20px">

            <c:forEach items="${pi.list}" var="good">
            <div class="col-md-3 table-bordered">
                <a href="goodsServlet?method=findGoodsById&id=${good.id}" style="text-decoration: none" target="showFrame">
                    <img src="${basePath}${good.goodsImg}" width="200px" style="margin-top: 20px">
                    <p style="color: gray">${good.goodsName}</p>
                    <p style="color: orangered">价格:${good.goodsPrice }</p>
                </a>
            </div>
            </c:forEach>

        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                <ul class="pagination">
                        <li><a href="goodsServlet?method=listGoodsByPage&currentPage=${pi.prePage}">上一页</a> </li>

                         <c:forEach items="${pi.navigatepageNums}" var="index">


                             <c:if test="${pi.pageNum==index}">
                                 <li class="active"><a href="javascript:;">${index}</a></li>
                             </c:if>


                             <c:if test="${pi.pageNum!=index}">
                                 <li><a href="goodsServlet?method=listGoodsByPage&currentPage=${index}">${index}</a> </li>
                             </c:if>
                         </c:forEach>



                        <li><a href="goodsServlet?method=listGoodsByPage&currentPage=${pi.nextPage}">下一页</a> </li>
                </ul>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="script/jquery-3.5.1.js"></script>

    <script type="text/javascript" src="script/bootstrap.js"></script>
    <!--加载表单插件-->
    <script type="text/javascript" src="script/form-info.js"></script>



    <script type="text/javascript">
        $(function () {
            // secondType 显示或者隐藏
            $(".secondLi li").hover(function () {
                $(".secondType").slideDown(400);
            },function (){
                //鼠标移出 需要清空所有排队的状态
                $(".secondType").stop(true);
            }) ;
            //鼠标移出 将二级分类的div隐藏
            $(".secondLi li").mouseout(function () {
                $(".secondType").slideUp(400);
            });
            //鼠标放入 div的时候 动画必须停止
            $(".secondType").mouseover(function () {
                $(".secondType").stop(true);
            });
            $(".secondType").mouseout(function () {
                $(".secondType").slideUp(400);
            });

            // mouseover   mouseout  stop...   (使用z-index  必须使用定位 absolute )

            $(function () {
                $("#firstNavId li").hover(function () {
                    $("#firstGoodsId").fadeIn(400);
                },function () {
                    $("#firstGoodsId").stop(true);
                });
                $("#firstNavId li").mouseout(function () {
                    $("#firstGoodsId").fadeOut(400);
                });

                $("#firstGoodsId").mouseover(function () {
                    $("#firstGoodsId").stop(true);
                });
                $("#firstGoodsId").mouseout(function () {
                    $("#firstGoodsId").fadeOut(400);
                });

            });


            $(".reg-btn").click(function(){

                var str=$("#regForm").serialize();


                $.ajax({
                    url:"user?method=addUser",
                    type:"post",
                    data:str,
                    success:function(data){
                        if(data=="true"){
                            alert("注册成功");

                            $("#regModal").modal("hide");


                            $("#loginModal").modal();
                        }
                        else{
                            alert("注册失败");
                        }
                    }

                })
            })

            $(".show-login-dio").click(function(){

                $("#regModal").modal();

                $("#regForm")[0].reset();
            })


            $(".login-btn").click(function(){

                var str=$("#loginForm").serialize();

                $.ajax({
                    url:"user?method=loginUser",
                    data:str,
                    success:function(data){

                         if(data=="false"){
                             alert("用户登录失败");
                         }
                         else{

                             $("#loginModal").modal("hide");
                             window.location.reload();
                         }
                    }
                })
            })


        });
    </script>
</body>
</html>